<template>
	<view class="wrap">
		<view class="perInfoWrap">
			<per-info :perInfo="perInfo" currPage="rankPage"></per-info>
		</view>
		<view class="rankCon">
			<view class="content">每个用户都会有一套属于自己的经验值、积分、头衔和能力值。我们特地为您定做了四套头衔系列，您可以注册登录后选择一个最喜欢的头衔，您可以通过学习知识点不断增加经验值，您的积分、头衔和能力值也会不断增加和晋升</view>
			<tab-navs :tabIndex="tabIndex" @switchRank="switchRank"></tab-navs>
			<tab-con :tabIndex="tabIndex"></tab-con>
		</view>
		<button class="comBtn" :loading="isDisabledFlag" :disabled="isDisabledFlag" @tap="saveRank">保存</button>
	</view>
</template>

<script>
	import PerInfo from './components/PerInfo.vue'
	import TabNavs from './components/TabNav.vue'
	import TabCon from './components/TabCon.vue'
	import { getSelfTitle,upLc } from '@/api/zhuxue'
	export default {
		components:{
			PerInfo,
			TabNavs,
			TabCon
		},
		data() {
			return {
				tabIndex:-1,
				perInfo:{},
				isDisabledFlag:false,
				icuId:0,
				icId:0
			}
		},
		onLoad(){
			this.loadMyTx();
		},
		methods: {
			saveRank(){
				var field = { account:uni.getStorageSync('token'),lcuId:this.icuId,lcId:this.icId };
				let contentStr = this.crypto.encrypt(JSON.stringify( field )); 
				this.isDisabledFlag = true;
				upLc({content:contentStr}).then(res=>{
					this.isDisabledFlag = false;
					this.util.showToastSuc('设置成功');
					let pages = getCurrentPages();
					let prevPage = pages[pages.length - 2];
					prevPage.$vm.isRefreshFlag = true;
					setTimeout(()=>{
						this.loadMyTx();
					},1800);
				}).catch(err=>{
					this.isDisabledFlag = false;
				});
			},
			loadMyTx(){
				var field = {  account:uni.getStorageSync('token') };
				let contentStr = this.crypto.encrypt(JSON.stringify( field )); 
				getSelfTitle({content:contentStr}).then(res=>{
					this.perInfo = res.data.datas;
					this.icuId = this.perInfo.icuId;
					this.icId = this.perInfo.icId;
					var tmpRes = res.data.datas.lcList;
					for(let i in tmpRes){
						if(tmpRes[i].selFlag){
							this.tabIndex = Number(i);
						}
					}
				}).catch(err=>{
					console.log(err)
				});
			},
			switchRank(index,id){
				this.tabIndex = index;
				this.icId = id;
			}
		}
	}
</script>
<style lang="scss">
	page{background: $pss-bg-primary;}
</style>
<style lang="scss" scoped>
	.wrap{
		padding-bottom: 50rpx;
	}
	.comBtn{
		@include respTo(phone){
			width: 600rpx;
			margin: 80rpx auto 0rpx;
		}
		@include respTo(pad){
			width: 90%;
			height: 60rpx;
			line-height: 60rpx;
			margin: 50rpx auto 0rpx;
			font-size: $padSize18;
		}
	}
	.rankCon{
		padding: 30rpx;
		background: #fff;
		.content{
			color: $pss-text-color3;
			margin-bottom: 30rpx;
			@include respTo(phone){
				line-height: 50rpx;
				font-size: $font-size30;
			}
			@include respTo(pad){
				line-height: 30rpx;
				font-size: $padSize16;
			}
		}
	}
	.perInfoWrap{
		padding: 30rpx;
		background: #fff;
		margin-bottom: 20rpx;
	}
</style>
